import React, { Fragment, Component } from "react";
import {
  View,
  Text,
  StatusBar,
  StyleSheet,
  TextInput,
  TouchableHighlight,
  ScrollView,
  Image,
  Dimensions
} from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Top from "../../components/Top/index";
import Shoppers from "../../components/Shoppers/index";
import Like from "../../components/like/index";
var { height, width } = Dimensions.get("window");
//import console = require("console");
class Home extends Component {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    console.log(this.props);
  }
  rightView5() {
    return (
      <View style={styles.rightViewStyle}>
        <Text
          style={{ fontSize: 14, marginTop: 3, marginRight: 10, color: "#777" }}
        >
          全部4家
        </Text>
        <Ionicons
          name={"ios-arrow-forward"}
          size={24}
          style={{ marginRight: 15 }}
        />
      </View>
    );
  }
  render() {
    return (
      <Fragment>
        <View style={styles.container}>
          <StatusBar backgroundColor="orange" barStyle="light-content" />
          <View style={styles.topGuide}>
            <Text style={styles.textStyle}>南通</Text>
            <TextInput style={styles.inputSearch} />
            <TouchableHighlight>
              <Ionicons
                name={"ios-qr-scanner"}
                size={24}
                color={"white"}
                style={styles.scanStyle}
              />
            </TouchableHighlight>
            <TouchableHighlight>
              <FontAwesome
                name={"bell-o"}
                size={24}
                style={styles.bellStyle}
                color={"white"}
              />
            </TouchableHighlight>
          </View>
          <ScrollView>
            <Top />
            <View
              style={{
                flexDirection: "row",
                marginTop: 10,
                height: 150,
                backgroundColor: "white"
              }}
            >
              <TouchableHighlight>
                <View
                  style={{
                    alignItems: "center",
                    height: 150,
                    justifyContent: "center",
                    width: 0.5 * width,
                    borderRightColor: "#DDD",
                    borderRightWidth: 1
                  }}
                >
                  <Image
                    source={require("../../images/mdqg.png")}
                    style={{ height: 30, width: 120, resizeMode: "contain" }}
                  />
                  <Image
                    source={require("../../images/yyms.png")}
                    style={{ height: 30, width: 120, resizeMode: "contain" }}
                  />
                  <Text style={{ marginTop: 10 }}>探路组碳烤鱼</Text>
                  <Text
                    style={{ marginTop: 10, color: "#B0E2FF", marginRight: 5 }}
                  >
                    ￥168
                    <Text
                      style={{
                        backgroundColor: "yellow",
                        marginLeft: 5,
                        color: "#000"
                      }}
                    >
                      再减3
                    </Text>
                  </Text>
                </View>
              </TouchableHighlight>
              <View style={{ height: 150, width: 0.5 * width }}>
                <TouchableHighlight>
                  <View
                    style={{
                      height: 74,
                      borderBottomColor: "#ddd",
                      borderBottomWidth: 1,
                      flexDirection: "row",
                      justifyContent: "space-between"
                    }}
                  >
                    <View
                      style={{
                        alignItems: "center",
                        justifyContent: "center",
                        marginLeft: 10
                      }}
                    >
                      <Text style={{ fontSize: 18, color: "#7CFC00" }}>
                        天天特价
                      </Text>
                      <Text style={{ marginTop: 5 }}>特惠不打烊</Text>
                    </View>
                    <View
                      style={{ alignItems: "center", justifyContent: "center" }}
                    >
                      <Image
                        source={require("../../images/tttj.png")}
                        style={{ width: 60, height: 60, resizeMode: "contain" }}
                      />
                    </View>
                  </View>
                </TouchableHighlight>
                <TouchableHighlight>
                  <View
                    style={{
                      height: 75,
                      borderBottomColor: "#ddd",
                      flexDirection: "row",
                      justifyContent: "space-between"
                    }}
                  >
                    <View
                      style={{
                        alignItems: "center",
                        justifyContent: "center",
                        marginLeft: 10
                      }}
                    >
                      <Text style={{ fontSize: 18, color: "#B22222" }}>
                        一元吃
                      </Text>
                      <Text style={{ marginTop: 5 }}>一元吃美食</Text>
                    </View>
                    <View
                      style={{ alignItems: "center", justifyContent: "center" }}
                    >
                      <Image
                        source={require("../../images/yyms.png")}
                        style={{ width: 60, height: 60, resizeMode: "contain" }}
                      />
                    </View>
                  </View>
                </TouchableHighlight>
              </View>
            </View>
            <View style={{ marginTop: 10 }}>
              <TouchableHighlight>
                <View
                  style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    height: 69,
                    width: width,
                    backgroundColor: "white",
                    borderBottomColor: "#ddd",
                    borderBottomWidth: 1
                  }}
                >
                  <View
                    style={{
                      //alignItems: "center",
                      justifyContent: "center",
                      marginLeft: 10
                    }}
                  >
                    <Text
                      style={{ fontSize: 18, color: "#B22222", marginLeft: 15 }}
                    >
                      最高立减25
                    </Text>
                    <Text style={{ marginTop: 5, marginLeft: 15 }}>
                      新用户专享
                    </Text>
                  </View>
                  <View
                    style={{ alignItems: "center", justifyContent: "center" }}
                  >
                    <Image
                      source={require("../../images/nsj.png")}
                      style={{ width: 100, height: 60, resizeMode: "contain" }}
                    />
                  </View>
                </View>
              </TouchableHighlight>
              <View style={{ flexDirection: "row" }}>
                <TouchableHighlight>
                  <View
                    style={{
                      width: 0.5 * width - 1,
                      height: 69,
                      borderBottomColor: "#ddd",
                      borderBottomWidth: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                      backgroundColor: "white",
                      borderRightColor: "#ddd",
                      borderRightWidth: 1
                    }}
                  >
                    <View
                      style={{
                        alignItems: "center",
                        justifyContent: "center",
                        marginLeft: 10
                      }}
                    >
                      <Text style={{ fontSize: 18, color: "#B22222" }}>
                        千万红包限时抢
                      </Text>
                      <Text style={{ marginTop: 5 }}>5折美食畅吃</Text>
                    </View>
                    <View
                      style={{ alignItems: "center", justifyContent: "center" }}
                    >
                      <Image
                        source={require("../../images/yyms.png")}
                        style={{ width: 60, height: 60, resizeMode: "contain" }}
                      />
                    </View>
                  </View>
                </TouchableHighlight>
                <TouchableHighlight>
                  <View
                    style={{
                      width: 0.5 * width,
                      height: 69,
                      borderBottomColor: "#ddd",
                      borderBottomWidth: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                      backgroundColor: "white"
                    }}
                  >
                    <View
                      style={{
                        alignItems: "center",
                        justifyContent: "center",
                        marginLeft: 10
                      }}
                    >
                      <Text style={{ fontSize: 18, color: "#B22222" }}>
                        踏青好去处
                      </Text>
                      <Text style={{ marginTop: 5 }}>优惠周边游</Text>
                    </View>
                    <View
                      style={{ alignItems: "center", justifyContent: "center" }}
                    >
                      <Image
                        source={require("../../images/yyms.png")}
                        style={{ width: 60, height: 60, resizeMode: "contain" }}
                      />
                    </View>
                  </View>
                </TouchableHighlight>
              </View>
              <View style={{ flexDirection: "row" }}>
                <TouchableHighlight>
                  <View
                    style={{
                      width: 0.5 * width - 1,
                      height: 69,
                      borderBottomColor: "#ddd",
                      borderBottomWidth: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                      backgroundColor: "white",
                      borderRightColor: "#ddd",
                      borderRightWidth: 1
                    }}
                  >
                    <View
                      style={{
                        alignItems: "center",
                        justifyContent: "center",
                        marginLeft: 10
                      }}
                    >
                      <Text style={{ fontSize: 18, color: "#B22222" }}>
                        鲜花一折起
                      </Text>
                      <Text style={{ marginTop: 5 }}>撩妹so easy</Text>
                    </View>
                    <View
                      style={{ alignItems: "center", justifyContent: "center" }}
                    >
                      <Image
                        source={require("../../images/yyms.png")}
                        style={{ width: 60, height: 60, resizeMode: "contain" }}
                      />
                    </View>
                  </View>
                </TouchableHighlight>
                <TouchableHighlight>
                  <View
                    style={{
                      width: 0.5 * width,
                      height: 69,
                      borderBottomColor: "#ddd",
                      borderBottomWidth: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                      backgroundColor: "white"
                    }}
                  >
                    <View
                      style={{
                        alignItems: "center",
                        justifyContent: "center",
                        marginLeft: 10
                      }}
                    >
                      <Text style={{ fontSize: 18, color: "#B22222" }}>
                        踏青季优惠
                      </Text>
                      <Text style={{ marginTop: 5 }}>春游装备一元购</Text>
                    </View>
                    <View
                      style={{ alignItems: "center", justifyContent: "center" }}
                    >
                      <Image
                        source={require("../../images/yyms.png")}
                        style={{ width: 60, height: 60, resizeMode: "contain" }}
                      />
                    </View>
                  </View>
                </TouchableHighlight>
              </View>
            </View>
            <TouchableHighlight
              style={{
                borderBottomColor: "#ddd",
                borderBottomWidth: 1,
                marginTop: 10
              }}
            >
              <View style={styles.container1}>
                <View style={styles.leftViewStyle}>
                  <Image
                    source={require("../../images/STAR.png")}
                    style={{
                      width: 30,
                      height: 30,
                      borderRadius: 15,
                      marginLeft: 10
                    }}
                  />
                  <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                    购物中心
                  </Text>
                </View>
                <View>{this.rightView5()}</View>
              </View>
            </TouchableHighlight>
            <Shoppers />
            <TouchableHighlight
              style={{
                borderBottomColor: "#ddd",
                borderBottomWidth: 1,
                marginTop: 10
              }}
            >
              <View style={styles.container1}>
                <View style={styles.leftViewStyle}>
                  <Image
                    source={require("../../images/STAR.png")}
                    style={{
                      width: 30,
                      height: 30,
                      borderRadius: 15,
                      marginLeft: 10
                    }}
                  />
                  <Text style={{ fontSize: 16, marginLeft: 10, marginTop: 3 }}>
                    猜你喜欢
                  </Text>
                </View>
                <View>{this.rightView5()}</View>
              </View>
            </TouchableHighlight>
            <Like />
          </ScrollView>
        </View>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ddd"
  },
  topGuide: {
    height: 65,
    backgroundColor: "orange",
    flexDirection: "row",
    //justifyContent:'center',
    alignItems: "center"
  },
  textStyle: {
    fontSize: 16,
    marginLeft: 10
  },
  inputSearch: {
    width: 250,
    height: 35,
    backgroundColor: "white",
    marginLeft: 15,
    borderRadius: 15
  },
  scanStyle: {
    marginLeft: 22
  },
  bellStyle: {
    marginLeft: 20
  },
  container1: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "white",
    height: 50
  },
  leftViewStyle: {
    flexDirection: "row",
    justifyContent: "center"
  },
  rightViewStyle: {
    flexDirection: "row",
    justifyContent: "center"
  }
});
export default Home;
